<template>
  <view class="upgrade-modal" :class="getShow === true ? 'show' : ''">
    <view class="upgrade-dialog upgrade-style">
      <view class="upgrade-img">
        <image :src="getBgImgSrc" mode="aspectFit"></image>
      </view>
      <view class="upgrade-tit">{{ getTitle || t('component.upgrade.title') }}</view>
      <view class="upgrade-subtit">{{ getVersion || '' }}</view>
      <view class="padding-xl text-left">
        <scroll-view style="max-height: 200rpx" scroll-y>
          <view style="font-size: 15px">{{ getUpgrade?.title || '' }}</view>
          <text style="margin-top: 10rpx; font-size: 11px">{{ getUpgrade?.content || '' }}</text>
        </scroll-view>
        <view class="upgrade-progress radius striped active" v-if="getShowProgress">
          <view class="upgrade-progress-inner" :style="'width: ' + getProgress.progress + '%;'">
            {{ getProgress.progress ? `${getProgress.progress}%` : '' }}
          </view>
        </view>
      </view>
      <view class="upgrade-bar justify-end">
        <view class="action">
          <wd-button
            :round="false"
            type="primary"
            class="upgrade-btn"
            v-if="getUpgrade.url && getShowProgress === false"
            @click="() => upgrader.upgrade()"
          >
            {{
              getUpgrade.need
                ? t('component.upgrade.confirmUpgrade')
                : t('component.upgrade.reinstall')
            }}
          </wd-button>
          <wd-button
            :round="false"
            type="info"
            class="upgrade-btn margin-left"
            v-if="getShowProgress === false"
            @click="() => upgrader.close()"
            >{{ t('common.close') }}
          </wd-button>
        </view>
        <view
          class="action text-center"
          v-if="getShowProgress === true && getUpgrade.force !== true"
        >
          <wd-button :round="false" type="info" class="upgrade-btn" @click="() => upgrader.abort()">
            {{ t('common.cancel') }}
          </wd-button>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
  import { useI18n } from '@/locale/index';
  import { useSkinStore } from '@/store/modules/skin';
  import { useThemeStore } from '@/store/modules/theme';

  import { useUpgraderInternal } from '../../data';
  import { upgradeProps } from '../../types';
  import bgBlueImg from './images/bg_blue.png';
  import bgBlueDarkImg from './images/bg_blue_dark.png';
  import bgGreenImg from './images/bg_green.png';
  import bgGreenDarkImg from './images/bg_green_dark.png';
  import bgDefaultImg from './images/bg_original.png';
  import bgRedImg from './images/bg_red.png';
  import bgRedDarkImg from './images/bg_red_dark.png';

  const props = defineProps(upgradeProps);

  const { t } = useI18n();
  const themeStore = useThemeStore();
  const skinStore = useSkinStore();

  const upgrader = useUpgraderInternal(props.selector);
  const { getShow, getTitle, getVersion, getUpgrade, getShowProgress, getProgress } = upgrader;

  /** 获取主题 */
  type themeType = 'blue' | 'red' | 'green';
  const getTheme = computed<themeType>(() => {
    let theme: themeType = 'blue';
    switch (skinStore.getCurrentThemeColor?.value) {
      case 'blue':
        theme = 'blue';
        break;
      case 'red':
        theme = 'red';
        break;
      case 'green':
        theme = 'green';
        break;
    }
    return theme;
  });

  /** 背景图资源集合 */
  const BgImgs = [
    { img: bgBlueImg, name: 'bg_blue' },
    { img: bgBlueDarkImg, name: 'bg_blue_dark' },
    { img: bgGreenImg, name: 'bg_green' },
    { img: bgGreenDarkImg, name: 'bg_green_dark' },
    { img: bgRedImg, name: 'bg_red' },
    { img: bgRedDarkImg, name: 'bg_red_dark' },
  ];
  /** 获取背景图资源 */
  const getBgImgSrc = computed(() => {
    let imgName = `bg_${unref(getTheme)}`;
    if (themeStore.getCurrentTheme === 'dark') {
      imgName = `${imgName}_dark`;
    }
    const bgImg = BgImgs.filter((o) => o.name.toLowerCase() === imgName.toLowerCase())[0];
    // 动态构建并返回图片资源路径
    return bgImg?.img ?? bgDefaultImg;
  });
</script>

<style lang="scss" scoped>
  @import './index';
</style>
